<template>
    <div class="type">
        <div class="text">类目热销榜</div>
        <div class="box">
            <a
                :href="item.targetUrl"
                class="first"
                :class="{ second: index > 1 }"
                v-for="(item, index) in list"
                :key="index">
                <div class="left">
                    <div class="text">{{ item.categoryName }}</div>
                    <div class="line" v-if="index < 2"></div>
                </div>
                <img class="right" :src="item.picUrl" alt="" />
            </a>
        </div>
    </div>
</template>

<script lang="ts" setup>
defineProps(['list']);
</script>

<style lang="less" scoped>
.type {
    width: 100%;
    .text {
        margin-top: 90rpx;
    }
    .box {
        margin: 20rpx 0;
        display: flex;
        flex-wrap: wrap;
        .first {
            margin: 0 7rpx;
            width: 48%;
            display: flex;
            justify-content: center;
            background-color: beige;
            .left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                .text {
                    font-size: 24rpx;
                    margin-top: 0;

                    padding: 30rpx 0;
                }
                .line {
                    width: 50rpx;
                    height: 4rpx;
                    background: black;
                }
            }
            .right {
                width: 224rpx;
                height: 224rpx;
            }
        }
        .second {
            width: 23%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #ccc;
            // margin-left: 8rpx;
            margin: 10rpx 7rpx;
            .left {
                .text {
                    font-size: 24rpx;
                    margin-top: 5rpx;
                }
            }
            .right {
                width: 134rpx;
                height: 134rpx;
            }
        }
    }
}
</style>
